<template>
  <div>
  <div class="outmain ba_f">
    <div class="shuju_title mar_b20">
      <div class="shuju_title_text">
        <span>分销商订单</span>
      </div>
    </div>
    <div class="pad_20 flex-y-top">
      <el-form :inline="true" :model="formInline" class="demo-form-inline searchform">
        <el-form-item label="分销商昵称/交易人昵称/订单编号">
          <el-input v-model="formInline.keyword" size="medium" placeholder="请输入分销商昵称/交易人昵称/订单编号" @input="onSearch"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch" size="medium">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick" class="mar_b20">
      <el-tab-pane label="全部" name="0"></el-tab-pane>
      <el-tab-pane label="外卖" name="1"></el-tab-pane>
      <el-tab-pane label="店内" name="2"></el-tab-pane>
      <el-tab-pane label="快餐" name="3"></el-tab-pane>
      <el-tab-pane label="当面付" name="4"></el-tab-pane>
    </el-tabs>
    <div class="tabledata">
      <el-table v-loading="listLoading" :element-loading-text="elementLoadingText" :data="list" stripe style="width: 100%" @selection-change="setSelectRows">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="portrait" label="交易人昵称/图像" width="200">
          <template slot-scope="scope">
            <div class="flex flex-y-top">
              <div class>
                <img class="goodlogo bor_rad50" :src="scope.row.portrait" />
              </div>
              <div class="mar_l10">
                <div>
                  <div>{{scope.row.userName}}</div>
                  <div><el-tag size="mini" type="info" class="mar_l5">（ID:{{scope.row.userId}}）</el-tag></div>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="userTel" label="分销商姓名/手机号">
          <template slot-scope="scope">
            <div>{{scope.row.distributionName}}</div>
            <div>{{scope.row.distributionTel}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="money" label="佣金"></el-table-column>
        <el-table-column prop="outTradeNo" label="订单编号"></el-table-column>
        <el-table-column prop="createdAt" label="备注">
          <template slot-scope="scope">
            <div v-if="scope.row.level=='1'">一级</div>
            <div v-if="scope.row.level=='2'">二级</div>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <div style="color: #489620" v-if="scope.row.type=='2'">正常</div>
            <div style="color: #df0029" v-if="scope.row.type=='1'">冻结</div>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="交易时间"></el-table-column>
<!--        <el-table-column label="操作">-->
<!--          <template slot-scope="scope">-->
<!--            <div class="flex">-->
<!--              <el-button type="text" @click="handleSeeEdit(scope.row)">查看</el-button>-->
<!--              <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>-->
<!--            </div>-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>
      <el-pagination
          background
          layout="prev, pager, next"
          :total="page.total"
          :page-size="page.pagesize"
          :current-page.sync='page.currentPage'
          @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
  </div>
</template>
<script>
import {distributionOrder} from "@/api/plug";
import {changeDate} from "@/utils";
export default {
  created() {
    if (this.$route.query.userId) {
      this.userId = this.$route.query.userId;
      this.fetchData();
    }else{
      this.fetchData();
    }
  },
  components: {

  },
  name: 'distributionOrder',
  data() {
    return {
      activeName: '0',
      formInline: {
        keyword: '',
        vipLabel: '',
        timeData: [],
      },
      list: [],
      listLoading: true,
      selectRows: "",
      elementLoadingText: "正在加载...",
      page: {
        total: 0,
        size: 10,
        currentPage: 1,
      },
      userId:'',
    };
  },
  methods: {
    async fetchData() {
      this.listLoading = true;
      var params = {
        keyword: this.formInline.keyword,
        page: this.page.currentPage,
        item: this.activeName,
        userId: this.userId,
      };
      const {data, count} = await distributionOrder(params);
      this.list = data;
      this.page.total = count;
      setTimeout(() => {
        this.listLoading = false;
      }, 100);
    },
    handleClick(){
      this.fetchData();
    },
    onSearch() {
      this.fetchData();
    },
    setSelectRows(val) {
      this.selectRows = val;
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.fetchData();
    },
  }
};
</script>
<style scoped>
.searchform .el-form-item__content .el-input {
  width: 300px;
}
</style>
